<template>
  <header id="topbar">
    <el-row>
      <el-col :span="3" class="topbar-left">
        <el-text style="font-weight: bold; color:darkblue" class="title">智能教育系统 </el-text> 
      </el-col>
      <el-col :span="2" class="topbar-left">
        <el-text style="font-weight: bold; color:darkblue" class="nav-item" @click="goHome">| 首页 </el-text> 
      </el-col>
      <el-col :span="2" class="topbar-left">
        <el-text style="font-weight: bold; color:darkblue" class="nav-item" @click="goCourseManage">| 课程管理</el-text>
      </el-col>
      <el-col :span="2" class="topbar-left">
        <!-- <el-text style="color:aliceblue" class="nav-item" @click="goAIassistant">| 智能助手</el-text> -->
        <el-text style="font-weight: bold; color:darkblue" class="nav-item">| 智能助手</el-text>
      </el-col>
      <el-col :span="14" class="topbar-right">
        <i class="el-icon-menu" @click="toggleMenu"></i>
        <div class="user">
          <img src="@/assets/img/notify.png" style="border: 3px solid #6098ff;" class="user-img" @click="goNotification"/>
          <img class="user-img"/>
          <el-text style="color: darkblue;">{{ user.userName }}</el-text>
          <img src="@/assets/img/userimg.png" style="border: 3px solid #6098ff;" class="user-img" @click="showSetting" />
          <transition name="fade">
            <div class="out" v-show="loginFlag">
              <ul>
                <li @click="goPersonalManage"><a href="javascript:;">用户信息</a></li>
                <li class="config"><a href="javascript:;">设置</a></li>
                <li class="exit" @click="exit"><a href="javascript:;">退出登录</a></li>
              </ul>
            </div>
          </transition>
        </div>
      </el-col>
    </el-row>
  </header>

  <div id="index" class="index-page">
    <section class="container">
      <div class="main_wrapper">
        <transition name="slide-fade" mode="out-in">
          <router-view></router-view>
        </transition>
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useCookies } from 'vue3-cookies'
import { useStore } from 'vuex'

const router = useRouter()
const { cookies } = useCookies()
const store = useStore()

// Local state
const loginFlag = ref(false)
const user = ref({
  userName: null,
  userId: null
})

// Toggle user settings menu
const showSetting = () => {
  loginFlag.value = !loginFlag.value
}

// Get user info from cookies on mount
const getUserInfo = () => {
  const userName = cookies.get('cname')
  const userId = cookies.get('cid')
  user.value.userName = userName
  user.value.userId = userId
}

// Vuex method to toggle menu
const toggleMenu = () => {
  store.commit('toggle')
}

// Methods to navigate to different pages
const goHome = () => {
  cookies.remove('selectedCourse')
  router.push({ path: '/teacher' })
}

const goCourseManage = () => {
  router.push({ path: '/teacher/courseDisplay' })
}

const goNotification = () => {
  cookies.remove('selectedCourse')
  router.push({ path: '/teacher/messageBox' })
}

const goPersonalManage = () => {
  cookies.remove('selectedCourse')
  router.push({ path: '/teacher/personalManage' })
}

const goAIassistant = () => {
  cookies.remove('selectedCourse')
  router.push({ path: '/teacher/AIassistant' })
}

// Logout logic
const exit = () => {
  const role = cookies.get('role')
  router.push({ path: '/' })
  cookies.remove('cname')
  cookies.remove('cid')
  cookies.remove('role')
  cookies.remove('token')

  if (role === 0) {
    store.state.menu.pop()
  }
}

// On mount, fetch user info
onMounted(() => {
  getUserInfo()
})
</script>

<style scoped>
.index-page {
  background-image: url('@/assets/img/bg1.png');
  background-size: cover;
  background-position: center;
  height: 100vh;
  margin-top: 0%;
  
  position: fixed; 
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

#topbar {
  position: fixed; 
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: hsla(217, 100%, 82%, 0.7);
  height: 80px;
  line-height: 80px;
  color: #fff;
  box-shadow: 5px 0px 10px rgba(0, 0, 0, 0.5);
}

#topbar .topbar-left {
  height: 80px;
  display: flex;
  justify-content: center;
  background: rgba(255, 254, 254, 0.05);
  overflow: hidden;
}

.topbar-left .icon-kaoshi {
  font-size: 60px;
}

.topbar-left .title {
  font-size: 25px;
  cursor: pointer;
  white-space: nowrap;
}

.nav-item {
  font-size: 16px;
  cursor: pointer;
  white-space: nowrap;
}

.topbar-right {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.topbar-right .user-img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-top: 15px;
  margin-left: 5px;
}

.topbar-right .el-icon-menu {
  font-size: 30px;
  margin-left: 20px;
}

.topbar-right .user {
  position: relative;
  margin-right: 40px;
  display: flex;
}

.user .out {
  font-size: 14px;
  position: absolute;
  top: 80px;
  right: 0;
  width: 80px;
  background-color: #e2f6ff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19);
  padding: 12px;
}

.user .out ul {
  list-style: none;
}

.user .out ul > li {
  height: 26px;
  line-height: 26px;
}

.out a {
  text-decoration: none;
  color: #111;
}

.out .exit {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid #ccc;
}

.out .config {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid #ccc;
}

.container {
  display: flex;
  background-color: rgba(f, f, f, 1); /* 半透明的蓝色 */
  margin-top: 30px;
}

.main_wrapper {
  overflow: hidden;
  position:fixed;
  margin-top: 20px;
  width: 100%;
  margin-left: 0%;
  flex: 1;
  background-color: rgba(f, f, f, 1); /* 半透明的蓝色 */
}

/* 过渡动画定义 */
.slide-fade-enter-active,
.slide-fade-leave-active {
  transition: transform 0.5s ease-in-out;
  position: relative;
}

.slide-fade-enter, .slide-fade-leave-to {
  transform: translateX(100%);
}

.slide-fade-enter-to, .slide-fade-leave {
  transform: translateX(0);
}

</style>
